<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安全生产</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <style>
      .video_box{
        width: 462px;
        overflow: hidden;
      }
      .video_item{
        position: relative;
        float: left;
        margin: 10px 10px 0 0;
        width: 226px;
        height: 113px;
      }
      .video_item video{
        width: 100%;
        height: 100%;
      }
      .video_item:nth-child(2n){
        margin-right: 0;
      }
      .cover_text{
        position: absolute;
        top: 0;
        left: 0;
        color: #ffffff;
      }




      .scene_item{
        margin: 0 10px;
        float: left;width: 303px;height: 230px;
      }

      .scene_title{
        margin-bottom: 10px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #ffffff;
        font-size: 16px;
        text-align: center;
        background-image: linear-gradient(to right, #1c4c9d , #16a9dd);
        box-shadow: 0 0 20px #16a9dd inset;
      }

      .scene_video{
        width: 303px;
        height: 171px;
      }
      .scene_video video{
        width: 100%;
        height: 100%;
      }
    </style>

</head>
<body class="shengchan_page">

<div class="video_box">
  <div class="video_item">
    <div class="cover_text">1号车间</div>
    <video src="../../video/common.mp4" controls></video>
  </div>
  <div class="video_item">
    <div class="cover_text">1号车间</div>
    <video src="../../video/common.mp4" controls></video>
  </div>
  <div class="video_item">
    <div class="cover_text">1号车间</div>
    <video src="../../video/common.mp4" controls></video>
  </div>
  <div class="video_item">
    <div class="cover_text">1号车间</div>
    <video src="../../video/common.mp4" controls></video>
  </div>
</div>

<div class="scene_box">
  <div class="scene_item">
    <div class="scene_title">5G+有轨出矿系统智能化控制</div>
    <div class="scene_video">
      <video src="" controls></video>
    </div>
  </div>
  <div class="scene_item">
    <div class="scene_title">5G+有轨出矿系统智能化控制</div>
    <div class="scene_video">
      <video src="" controls></video>
    </div>
  </div>
  <div class="scene_item">
    <div class="scene_title">5G+有轨出矿系统智能化控制</div>
    <div class="scene_video">
      <video src="" controls></video>
    </div>
  </div>
  <div class="scene_item">
    <div class="scene_title">5G+有轨出矿系统智能化控制</div>
    <div class="scene_video">
      <video src="" controls></video>
    </div>
  </div>
</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
$(function (){


  getData();

  function getData() {
    getJson('api/WEB-SQL/websql/openInterface/qyzl?categoryNo=JCFM&limit=4',{},function (res) {
      if(res.code == 200){
        let html = ``;
        for (let i = 0; i < res.data.length; i++) {
          let tipimg = '';
          switch (res.data[i].category) {
            case '100301':
              //环保
              tipimg = 'tip1';
              break;
            case '100302':
              //生产
              tipimg = 'tip2';
              break;
            case '100303':
              //绿色矿山
              tipimg = 'tip3';
              break;
            case '100304':
              //科技
              tipimg = 'tip4';
              break;
            default :
              tipimg = 'tip1';
              break;
          }

          let itemHtml= `<div class="item l">
            <div class="item_type">
              <img src="../../img/all/${tipimg}.png" alt="">
            </div>
            <div class="item_content swiper-container">
              <div class="item_img_list swiper-wrapper">`;

          const attArr = res.data[i].attachments?res.data[i].attachments.split(','):[];

          for(let j = 0; j < attArr.length;j++){
            itemHtml += `<img class="swiper-slide" src="${vars.url + 'api/BASE-SERVER/sys/oss/local/' + attArr[j]}" alt="">`
          }
          itemHtml += `</div>
              <div class="item_desc el2" title="${res.data[i].remark || ''}">${res.data[i].remark || ''}</div>
            </div>
          </div>`;
          html += itemHtml;
        }
        $('.fengmao_box').html(html);
        var mySwiper = new Swiper ('.swiper-container', {
          autoplay:true,
          loop: true, // 循环模式选项
        })
      }
    })
  }

})
</script>
</html>
